<template>
    <div class="home-page">
        <Header></Header>
        <div class="content container-fuild hidden-xs" style="margin-top: 120px;">
          <div class="banner-img">
            <img  src="../../assets/img/homeBanner.png" />
          </div>
          <div class="book-list">
            <div class="gray-blank"></div>
            <div class="book-center">
              <div class="book-center-red-line"></div>
              <div class="book-center-title"><img :src="title01" alt=""></div>
              <div class="book-center-desc">畅听百本好书精华，共同成长不负时光</div>
              <div class="book-center-list">
                <div class="book-center-item">
                  <img src="../../assets/img/book01.png">
                  <div class="book-name">活法</div>
                </div>
                <div class="book-center-item">
                  <img src="../../assets/img/book02.png">
                  <div class="book-name">苏东坡 传</div>
                </div>
                <div class="book-center-item">
                  <img src="../../assets/img/book03.png">
                  <div class="book-name">穷查理宝典</div>
                </div>
                <div class="book-center-item">
                  <img src="../../assets/img/talks.png">
                  <div class="book-name">演讲的力量</div>
                </div>
                <div class="book-center-item">
                  <img src="../../assets/img/think.png">
                  <div class="book-name">思考，快与慢</div>
                </div>
              </div>
            </div>
            <div class="book-list-red-line"></div>
          </div>
          <div class="content-section-1">
            <div class="section-1-center">
              <div class="section-1-left" ref="section1Left">
                <div class="section-1-title">畅听高分好书精华<br />每年更新超100本</div>
                <div class="section-1-desc">自我提升，职场技能<br />心灵沟通，家庭关系<br />名人传记，经典巨著<br />心理学，经济学，人文历史<br />……</div>
              </div>
              <div class="section-1-right" ref="section1Right">
                <img class="section-1-book" src="../../assets/img/readingBook.png" />
              </div>
            </div>
          </div>
          <div class="content-section-2" ref="section2">
            <div class="section-2-center">
              <div class="section-2-left" ref="section2Left">
                <img src="../../assets/img/section2Book.png" class="section-2-book" />
                <img src="../../assets/img/section2Btn.png" class="section-2-btn" />
              </div>
              <div class="section-2-right" ref="section2Right">
                <div class="section-2-title">汇聚各领域达人<br />与你共读经典</div>
                <div class="section-2-desc">
                  生活感悟，人生态度<br />
                  理论知识，实操技能<br />
                  迭代新认知，创新方法论<br />
                  让你收获满满，遇到更好的自己
                </div>
              </div>
            </div>
          </div>
          <div class="content-section-3">
            <div class="section-3-center">
              <div class="section-3-left" ref="section3Left">
                <div class="section-3-title">100+知识彩蛋<br />助你变身知识达人</div>
                <div class="section-3-desc">每年更新超过100个实用知识彩蛋，<br />砸彩蛋赢奖励，让你变身知识达人，<br />轻松成长，成为赚钱高手</div>
              </div>
              <div class="section-3-right" ref="section3Right"></div>
              <img src="../../assets/img/egg.png" class="section-3-egg" ref="section3Egg" />
            </div>
          </div>
          <div class="content-section-4">
            <div class="section-4-center">
              <div class="section-4-sum-title"><img :src="title02" alt=""></div>
              <div class="section-4-sum-desc">读书赚学分做公益，一起变身公益达人</div>
              <div class="section-4-wrap">
                <div class="section-4-left" ref="section4Left">
                  <img class="section-4-bg" src="../../assets/img/section4Bg.png"/>
                  <img class="section-4-book" src="../../assets/img/section4Book.png"/>
                </div>
                <div class="section-4-right" ref="section4Right">
                  <div class="section-4-title">
                    学分做公益<br />
                    为贫困山区儿童的心愿助力
                  </div>
                  <div class="section-4-desc">
                    开通会员后，会员可通过完成每日任务获得学分，获得的学分可用于「公益伴学」，为贫困山区儿童的心愿助力！<br/><br />
                    参与公益伴学还可以赚取爱心值，爱心值越高，越有机会赢取「益伴探索之旅」。<br /><br />
                    「益伴探索之旅」将分为多期：（包括但不限于）与益伴团队成员外出旅游，与商业精英出国进行考察，与明星一起支教……
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-section-7">
            <div class="section-5-sum-title"><img :src="title03" alt=""></div>
            <div class="section-5-sum-desc">每日听书写笔记，日积月累丰富你的知识体系</div>
            <div class="noteflex">
              <div class="noteimg"><img :src="note01" alt=""></div>
              <div class="noteimg"><img :src="note02" alt=""></div>
              <div class="noteimg"><img :src="note03" alt=""></div>
            </div>
          </div>
          <div class="content-section-5">
            <div class="section-5-center">
              <div class="section-5-sum-title"><img :src="title04" alt=""></div>
              <div class="section-5-sum-desc">读书赚学分做公益，一起变身公益达人</div>
              <div class="section-5-wrap">
                <div class="feed-back-box">
                  <div class="feed-back-header">
                    <img class="feed-back-avator" :src="head02"/>
                    <span class="feed-back-name">书友4528</span>
                  </div>
                  <div class="feed-back-content">
                    我是真正的受益者，对家庭关系、对亲子教育、和工作事业都有很大的收获，尤其是解读《自卑与超越》、《非暴力沟通》等书籍。
                  </div>
                </div>
                <div class="feed-back-box">
                  <div class="feed-back-header">
                    <img class="feed-back-avator" :src="head03"/>
                    <span class="feed-back-name">香闲书墨</span>
                  </div>
                  <div class="feed-back-content">
                    被吸引了，内容好，主持人的声音也好听。虽然已经进入了老年生活，但是通过读书弥补中青年时期由于条件和环境不允许对许多知识的缺失，真是一件幸事。
                  </div>
                </div>
                <div class="feed-back-box">
                  <div class="feed-back-header">
                    <img class="feed-back-avator" :src="head01"/>
                    <span class="feed-back-name">睿梦珂</span>
                  </div>
                  <div class="feed-back-content">
                    益伴教会了我如何和孩子相处，如何理解孩子的感受，通过同理心倾听和无条件的爱、认同和感受孩子的情绪。是因为益伴才改变了我和孩子的关系，感谢益伴！
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-section-6">
            <div class="section-6-center">
              <div class="section-6-sum-title"><img :src="title05" alt=""></div>
              <div class="section-6-sum-desc">读书赚学分做公益，一起变身公益达人</div>
              <div class="section-6-wrap">
                <img src="../../assets/img/downloadApp.png" />
                <img src="../../assets/img/scanApp.png" />
              </div>
            </div>
          </div>
        </div>
        <MobileContent class="visible-xs"></MobileContent>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from './components/Header'
    import Footer from './components/Footer'
    import MobileContent from './components/MobileContent'
    import { WOW } from 'wowjs';
    export default {
        name: "index",
        data() {
          return {
            note01:require('../../assets/img/note01.png'),
            note02:require('../../assets/img/note02.png'),
            note03:require('../../assets/img/note03.png'),
            title01:require('../../assets/img/title01.png'),
            title02:require('../../assets/img/title02.png'),
            title03:require('../../assets/img/title03.png'),
            title04:require('../../assets/img/title04.png'),
            title05:require('../../assets/img/title05.png'),
            head01: require('../../assets/img/head01.jpeg'),
            head02: require('../../assets/img/head02.jpeg'),
            head03: require('../../assets/img/head03.jpeg'),
          }
        },
        components:{
            Header,Footer,MobileContent
        },
        methods:{
          handleScroll(){
            // 子模块不同频滑动
            // this.subScroll(this.$refs.section2)
            this.subScroll(this.$refs.section1Left,80,40)
            this.subScroll(this.$refs.section2Right,80,40)
            this.subScroll(this.$refs.section3Left,80,40)
            this.subScroll(this.$refs.section4Right,80,40)

            // this.subScroll(this.$refs.section1Right,100,50)
            // this.subScroll(this.$refs.section2Left,100,50)
            // this.subScroll(this.$refs.section3Right,100,50)
            // this.subScroll(this.$refs.section3Egg,100,50)
            // this.subScroll(this.$refs.section4Left,100,50)
          },
          subScroll:function(dom,range,rate){
            if(dom.getBoundingClientRect().top<window.innerHeight && dom.getBoundingClientRect().top > 0){
              let offset = dom.getBoundingClientRect().top / window.innerHeight * range -rate
              dom.style.transform = `translateY(${offset}px)`
            }
          }
        },
        mounted:function () {
          var wow = new WOW();
          wow.init();
          window.addEventListener('scroll', this.handleScroll);
        },
        destroyed: function () {
          window.removeEventListener('scroll', this.handleScroll);   //  离开页面清除（移除）滚轮滚动事件
        }
    }
</script>

<style lang="less" scoped>
    @center-width: 1130px;
    /*公共section样式*/
    .common-section-style(@marginTop:0,@height:0,@position:relative){
      margin-top: @marginTop;
      height: @height;
      position:@position;
    }
    .common-section-center-style(){
      width: @center-width;
      height: 100%;
      margin:0 auto;
      position: relative;
      display: flex;
    }

    /*红色线条 方块 圆圈*/
    .red-cube{
      width: 34px;
      height: 34px;
      display: inline-block;
      position: absolute;
      box-sizing: border-box;
      background-color: #E14638;
      content:'';
    }
    .red-circle{
      width: 34px;
      height: 34px;
      display: inline-block;
      position: absolute;
      box-sizing: border-box;
      border-radius: 17px;
      background-color: #E14638;
      content:'';
    }
    .red-line-row{
      width: 130px;
      height: 2px;
      border: 1px solid #E14638;
      display: inline-block;
      position: absolute;
      box-sizing: border-box;
      content:'';
    }
    .red-line-column{
      width: 2px;
      height: 130px;
      border: 1px solid #E14638;
      display: inline-block;
      position: absolute;
      box-sizing: border-box;
      content:'';
    }
    .home-page{
      width: 100%;
      overflow-x: scroll;
      .content{
        .banner-img{
          img{
            width: 100%;
            min-width: @center-width;
          }
        }
        .book-list{
          height: 680px;
          position: relative;
          .gray-blank{
            height: 410px;
            background-color: #f9f9f9;
          }
          .book-center{
            position: absolute;
            top: 0;
            width: @center-width;
            left:50%;
            margin-left: -565px;
            .book-center-red-line{
              &:extend(.red-line-column);
              left: 0;
            }
            .book-center-title{
              color: #151515;
              width: 217px;
              margin: 100px auto 0 auto;
            }
            .book-center-desc{
              margin-top: 13px;
              color: #888;
              font-size: 22px;
            }
            .book-center-list{
              display: flex;
              padding-left: 50px;
              margin-top: 60px;
              .book-center-item{
                img{
                  width: 150px;
                }
                .book-name{
                  text-align: left;
                  margin-top: 63px;
                  color: #9c9c9c;
                  font-size: 16px;
                }
              }
              .book-center-item:not(:nth-child(1)){
                margin-left: 60px;
              }
            }
          }
          .book-list-red-line{
            &:extend(.red-line-row);
            left: 0;
            bottom:0;
          }
        }
        .content-section-1{
          .common-section-style(44px,374px);
          .section-1-center{
            .common-section-center-style();
            .section-1-left{
              width: 430px;
              padding-top:88px;
              .section-1-title{
                color: #151515;
                font-size: 40px;
                text-align: left;
                padding-left: 50px;
                position: relative;
                padding-bottom: 32px;
              }
              .section-1-title:after{
                &:extend(.red-line-row);
                left: 50px;
                bottom:0;
              }
              .section-1-desc{
                margin-top: 16px;
                color:#9C9C9C;
                font-size: 20px;
                text-align: left;
                position: relative;
                left: 225px;
              }
            }
            .section-1-right{
              flex: 1;
              background: url("../../assets/img/readingBookBg.png");
              background-size: 100% 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              img{
                width: 592px;
                margin-right: 38px;
              }
            }
          }
          .section-1-center:before{
            &:extend(.red-cube);
            left: -34px;
            bottom:-34px;
          }
          .section-1-center:after{
            &:extend(.red-line-column);
            right: 0;
            bottom: -130px;
          }
        }
        .content-section-1:after{
          &:extend(.red-line-row);
          right: 0;

        }
        .content-section-2{
          .common-section-style(260px,680px);
          .section-2-center{
            .common-section-center-style();
            .section-2-left{
              width: 647px;
              background: url("../../assets/img/section2Bg.png");
              background-size: 100% 100%;
              display: flex;
              justify-content: flex-start;
              position:relative;
              .section-2-book{
                width: 580px;
                height:473px;
                margin-left: 30px;
                margin-top: 59px;
              }
              .section-2-btn{
                position: absolute;
                width: 120px;
                bottom:0;
                right:0;
                margin-right: 41px;
                margin-bottom: 11px;
              }
              &:after{
                &:extend(.red-line-column);
                bottom:-130px;
              }
            }
            .section-2-right{
              flex: 1;
              padding-top:123px;
              .section-2-title{
                color: #151515;
                font-size: 40px;
                text-align: right;
                padding-right: 81px;
                position: relative;
                padding-bottom: 32px;
                &:after{
                  &:extend(.red-line-row);
                  bottom:0;
                  right: 81px;
                }
              }
              .section-2-desc{
                text-align: right;
                margin-top: 16px;
                font-size: 20px;
                color:#9C9C9C;
                position: relative;
                right: 210px;
              }
            }
            &:after{
              &:extend(.red-circle);
              right: -34px;
              bottom: -34px;
            }
          }
        }
        .content-section-3{
          .common-section-style(220px,418px);
          .section-3-center{
            .common-section-center-style();
            .section-3-left{
              width: 430px;
              .section-3-title{
                margin-top: 88px;
                color: #151515;
                font-size: 40px;
                text-align: left;
                padding-left: 50px;
                position: relative;
                padding-bottom: 32px;
              }
              .section-3-title:after{
                &:extend(.red-line-row);
                left: 50px;
                bottom:0;
              }
              .section-3-desc{
                margin-top: 16px;
                color:#9C9C9C;
                font-size: 20px;
                text-align: left;
                position: relative;
                left: 225px;
              }
            }
            .section-3-right{
              width: 480px;
              height: 374px;
              background: url("../../assets/img/section3Bg.png");
              background-size: 100% 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              img{
                width: 592px;
                margin-right: 38px;
              }
            }
            .section-3-egg{
              width: 463px;
              height: 505px;
              position: absolute;
              right: 0;
              bottom:-40px;
            }
          }
          .section-3-center:before{
            &:extend(.red-cube);
            left: -34px;
            bottom:-34px;
          }
          .section-3-center:after{
            &:extend(.red-line-column);
            right: 44px;
            bottom: -130px;
          }
          &:after{
            &:extend(.red-line-row);
            right: 0;

          }
          &:before{
            &:extend(.red-line-row);
            left: 0;
            top:0;
          }
        }
        .content-section-4{
          .common-section-style(258px,1050px);
          background: url("../../assets/img/topBg.png") no-repeat;
          background-size: 100% 67%;
          .section-4-center{
            .common-section-center-style();
            flex-direction: column;
            .section-4-sum-title{
              color: #151515;
              font-size: 50px;
              margin: 100px auto 0 auto;
              width: 217px;
            }
            .section-4-sum-desc{
              color:#888888;
              font-size: 22px;
              margin-top: 13px;
            }
            .section-4-wrap{
              flex: 1;
              display: flex;
              .section-4-left{
                width: 542px;
                position: relative;
                .section-4-bg{
                  width: 542px;
                  position: absolute;
                  z-index: 1;
                  bottom:0;
                  left: 0;
                }
                .section-4-book{
                  width: 375px;
                  position: absolute;
                  z-index: 2;
                  bottom: 51px;
                  left: 50px;
                }
              }
              .section-4-right{
                padding-top: 294px;
                .section-4-title{
                  font-size: 40px;
                  color: #151515;
                  text-align: right;
                  padding-bottom: 32px;
                  position: relative;
                  &:after{
                    &:extend(.red-line-row);
                    right: 0;
                    bottom: 0;
                  }
                }
                .section-4-desc{
                  width: 421px;
                  float: right;
                  text-align: left;
                  font-size: 20px;
                  color: #9c9c9c;
                  margin-top: 36px;
                }
              }
            }
            &:before{
              &:extend(.red-line-column);
              bottom: -130px;
              left: 0;
            }
          }
          &:before{
            &:extend(.red-line-row);
            bottom: 0;
            left: 0;
          }
        }
        .content-section-7{
          .common-section-style(260px,773px);
          background: #F9F9F9;
          .section-5-sum-title{
            color: #151515;
            font-size: 50px;
            padding-top: 100px;
            margin: 0 auto;
            width: 217px;
          }
          .section-5-sum-desc{
            color:#888888;
            font-size: 22px;
            margin-top: 13px;
          }
          .noteflex{
            display: flex;
            justify-content: center;
            margin-top: 37px;
            .noteimg{
              width: 343px;
              margin: 0 11px;
            }
          }
        }
        .content-section-5{
          .common-section-style(0px,456px);
          background-color: #FE7067;
          .section-5-center{
            .section-5-sum-title{
              padding-top: 100px;
              color:#ffffff;
              font-size: 50px;
              margin: 0 auto;
              width: 217px;
            }
            .section-5-sum-desc{
              font-size: 22px;
              color: #ffffff;
              margin-top: 13px;
            }
            .section-5-wrap{
              display: flex;
              justify-content: center;
              margin-top: 46px;
              .feed-back-box{
                width: 343px;
                height: 150px;
                background:rgba(255,255,255,1);
                box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1);
                border-radius:14px;
                padding: 16px;
                .feed-back-header{
                  text-align: left;
                  .feed-back-avator{
                    width: 30px;
                    border-radius: 15px;
                    margin-right: 10px;
                  }
                  .feed-back-nam{
                    font-size: 18px;
                    color:#151515;
                  }
                }
                .feed-back-content{
                  text-align: left;
                  margin-top: 17px;
                  font-size: 14px;
                  color: #888;
                }
                &:not(:nth-child(1)){
                  margin-left: 42px;
                }
              }
            }
          }
        }
        .content-section-6{
          .common-section-style(0,492px);
          background-color: #FFFFFF;
          .section-6-center{
            .section-6-sum-title{
              padding-top: 100px;
              color:#151515;
              font-size: 50px;
              margin: 0 auto;
              width: 217px;
            }
            .section-6-sum-desc{
              font-size: 22px;
              color: #888888;
              margin-top: 13px;
            }
            .section-6-wrap{
              display: flex;
              justify-content: center;
              margin-top: 46px;
              img{
                width:406px;
                height: 150px;
                &:nth-child(1){
                  margin-left: 40px;
                }
              }
            }
          }
        }
      }
    }
    @media screen and (max-width: 997px) {}
</style>
